<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>移动端网站开发</title>
    <link rel="stylesheet" href="fonts/iconfont.css" media="screen" title="no title">
    <style>
         ::-webkit-scrollbar {
            width: 0;
            height: 0;
        }
        html,
        body ,ul{
            margin: 0;
            padding: 0;
            width: 100%;
            height: 100%;
            font-size: 14px;
        }
        li{list-style: none;width: 20%;}
        a {
            -webkit-tap-heightlight-color: rgba(150, 255, 0, 0.5);
        }

        .wrapper {
            display: flex;
            flex-direction: column;
            justify-content: flex-start;
            height: 100%;
        }
        /*.header,.container,.nav{
          flex-basis: 100%;
        }*/

        .header {
            height: 48px;
            background: #38f;
            flex-shrink: 0;
            display: flex;
            flex-direction: row;
            justify-content: space-around;
        }

        .container {
            flex-grow: 1;
            background: rgba(244, 135, 226, 0.5);
            overflow-y: auto;
            display: flex;
            flex-direction: row;
            flex-wrap: wrap;
            justify-content: space-around;
            /*align-content: space-around;*/
        }

        .nav {
            height: 48px;
            background: rgba(202, 233, 13, 0.5);
            flex-shrink: 0;
        }
        .nav ul{
          display: flex;
          align-items: center;
        }

        li:nth-of-type(1)::before{
            content: "\e603";
        }
        li:nth-of-type(2)::before{
            content: "\e622";
        }
        li:nth-of-type(3)::before{
            content: "\e61a";
        }
        li:nth-of-type(4)::before{
            content: "\e681";
        }
        li:nth-of-type(5)::before{
            content: "\e779";
        }
        .header a{
            text-decoration: none;
            line-height: 48px;
            font-size: 30px;
        }
        .header span{
            line-height: 48px;
            font-size: 30px;
            color: #fff;
        }
        .header a:nth-of-type(1)::before{
            content: "\e61d";
        }
        .header a:nth-of-type(2)::before{
            content: "\e649";
        }
        .container div{
            width: 35%;
            height: 120px;
            margin: 10px 0px;
            text-align: center;
            line-height: 150px;
            background: #FFF;
            border: 1px solid #000;
            position: relative;
        }
        .container div::after{
          content: '';
          display: block;
          width: 100%;
          height: 120px;
          background-color: #fff;
          box-shadow: 0 0 20px rgba(0, 0, 0, 0.8);
          position: absolute;
          left: 0px;
          bottom: 0px;
          z-index: -1;
        }
    </style>
</head>

<body>
    <div class="wrapper">
        <header class="header">
          <a href="" class="iconfont "></a>
          <span>移动端</span>
          <a href="" class="iconfont"></a>
        </header>
        <section class="container">
            <div>item-1</div>
            <div>item-2</div>
            <div>item-3</div>
            <div>item-4</div>
            <div>item-5</div>
            <div>item-6</div>
            <div>item-7</div>
            <div>item-8</div>
            <div>item-9</div>
            <div>item-10</div>


        </section>
        <nav class="nav">
            <ul>
                <li class="iconfont">分类</li>
                <li class="iconfont">订单</li>
                <li class="iconfont">购物车</li>
                <li class="iconfont">提醒</li>
                <li class="iconfont">设置</li>
            </ul>
        </nav>
    </div>
</body>

</html>
